.nav-bar {
    .nav-bar-top {
        position: fixed; /* 固定定位 */
        top: 0; /* 距离页面顶部 0 像素 */
        left: 0; /* 距离页面左侧 0 像素 */
        z-index: 99; /* 设置 z-index，以确保其在其他元素之上 */
        width: 100%; /* 宽度占满 100% 覆盖整个页面宽度 */
        background-color: $base-color; /* 背景颜色使用变量 $base-color */
        padding: 0rpx 30rpx 20rpx; /* 垂直方向的内边距为 0，水平方向的内边距为 30 像素 */
        box-sizing: border-box; /* 设置盒模型为 border-box，可以更好地控制元素的大小 */

        .nav-bar-content {
            @include flex(flex-start); /* 引入 flexbox 布局，主轴方向为起始位置 */
            height: 60rpx; /* 高度设为 60rpx */
            background-color: #FFFFFF; /* 背景色为白色 */
            border-radius: 30rpx; /* 圆角为 30rpx */
            flex-grow: 1; /* 允许该元素在 flex 容器中扩展 */
            padding-left: 20rpx; /* 左侧内边距设为 20rpx */
            box-sizing: border-box; /* 同样设置盒模型为 border-box */

            .nav-bar-search-txt {
                font-size: 28rpx; /* 字体大小设置为 28rpx */
                width: 100%; /* 宽度占满 100% */
                margin-left: 20rpx; /* 左侧外边距为 20rpx */
               /* 文字颜色使用变量 $c-9 */
			   color: $c-9;
            }	
        }	
    }
}
